import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Modal,
  TouchableOpacity,
  Dimensions,
  Animated,
} from 'react-native';

import DatePickerPart from '../../../components/Tool/DatePickerPart'

const { height: SCREEN_HEIGHT } = Dimensions.get('window');

class DateRangeModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalAnimation: new Animated.Value(0),
      startDate: '',
      endDate: '',
      showDatePicker: false,
      dateType:'1',//1选择开始日期 2选择结束日期
    };
  }

  componentDidMount() {
    this.setState({
      startDate: this.props.startDate,
      endDate: this.props.endDate
    })
  }

  componentDidUpdate(prevProps) {
    if (this.props.visible && !prevProps.visible) {
      this.animateIn();
    } else if (!this.props.visible && prevProps.visible) {
      this.animateOut();
    }
  }

  animateIn = () => {
    Animated.timing(this.state.modalAnimation, {
      toValue: 1,
      duration: 300,
      useNativeDriver: true,
    }).start();
  };

  animateOut = () => {
    Animated.timing(this.state.modalAnimation, {
      toValue: 0,
      duration: 300,
      useNativeDriver: true,
    }).start();
  };

  handleReset = () => {
    this.setState({
      startDate: '',
      endDate: '',
    });
  };

  handleConfirm = () => {
    const { startDate, endDate } = this.state;
    if (this.props.onConfirm) {
      this.props.onConfirm(startDate, endDate);
    }
    this.props.onClose();
  };

  render() {
    const translateY = this.state.modalAnimation.interpolate({
      inputRange: [0, 1],
      outputRange: [SCREEN_HEIGHT, 0],
    });

    return (
      <Modal
        transparent
        visible={this.props.visible}
        onRequestClose={this.props.onClose}
        animationType="none"
      >
        <TouchableOpacity
          style={styles.overlay}
          activeOpacity={1}
          onPress={this.props.onClose}
        />
        <Animated.View
          style={[
            styles.contentContainer,
            { transform: [{ translateY }] }
          ]}
        >
          <Text style={styles.title}>成交日期</Text>

          <View style={styles.dateInputContainer}>
            <View style={styles.dateInput}>

              <TouchableOpacity style={styles.input}
                onPress={() => { this.setState({ showDatePicker: true ,dateType:'1'}) }}>
                <Text>{this.state.startDate || '开始日期'}</Text>
              </TouchableOpacity>
            </View>
            <Text style={styles.separator}>-</Text>
            <View style={styles.dateInput}>

              <TouchableOpacity style={styles.input}
                onPress={() => { this.setState({ showDatePicker: true,dateType:'2' }) }}>
                <Text>{this.state.endDate || '结束日期'}</Text>
              </TouchableOpacity>
            </View>
          </View>

          <View style={styles.buttonContainer}>
            <TouchableOpacity
              style={styles.resetButton}
              onPress={this.handleReset}
            >
              <Text>重置</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.confirmButton}
              onPress={this.handleConfirm}
            >
              <Text style={styles.confirmButtonText}>确认</Text>
            </TouchableOpacity>
          </View>
        </Animated.View>

        <DatePickerPart type={''} defaultDate={''} show={this.state.showDatePicker} changeState={
          (val) => { // 时间选择组件显示与否

            this.setState({
              showDatePicker: val,
              
            })
          }
        } changeDate={(date) => {
          console.log(date)
          if (this.state.dateType == '1') {
            this.setState({
              startDate: date
            })
          } else {
            this.setState({
              endDate: date
            })
          }
          
        }} />
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
  },
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    marginTop: 100
  },
  contentContainer: {
    position: 'absolute',
    top: 100,
    left: 0,
    right: 0,
    backgroundColor: '#fff',

    padding: 20,
  },
  header: {
    alignItems: 'center',
    marginBottom: 20,
  },
  title: {
    fontSize: 16,
    fontWeight: '500',
    color: '#333333'
  },
  dateInputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 20,
  },
  dateInput: {
    flex: 1,
  },
  input: {
    marginTop: 8,
    padding: 10,
    backgroundColor: '#F5F5F5',
    borderRadius: 5,
  },
  separator: {
    marginHorizontal: 10,
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  resetButton: {
    flex: 1,
    padding: 15,
    borderRadius: 5,
    backgroundColor: '#F5F5F5',
    alignItems: 'center',
    marginRight: 10,
  },
  confirmButton: {
    flex: 2,
    padding: 15,
    borderRadius: 5,
    backgroundColor: '#FFEB00',
    alignItems: 'center',
  },
  confirmButtonText: {
    fontSize: 16,
    fontWeight: '500',
  },
});

export default DateRangeModal;